<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>产品信息</title>
    <script src="../js/global.js"></script>
    <script src="../lib/jquery-3.4.1/jquery-3.4.1.min.js"></script>
    <link rel="stylesheet" href="../lib/layui-v2.6.3/css/layui.css">
    <script src="../lib/layui-v2.6.3/layui.js"></script>
    <!--引入layui的css  -->
</head>
<!--引入layui的js  -->
<!--引入jquery的js  -->

<body>
<!-- 查询条件输入框 -->
<div class="layui-form-item" style="margin-top: 10px;">
    <form class="layui-form" onsubmit="return false;">
        <label class="layui-form-mid">用户名:</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" id="loginName" name="loginName" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-mid">时间:</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" id="beginTime" name="begintime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>
        <label class="layui-form-mid">--</label>
        <div class="layui-input-inline" style="width: 120px;">
            <input type="text" id="endTime" name="endtime" placeholder="yyyy-MM-dd" autocomplete="off" class="layui-input">
        </div>

        <label class="layui-form-mid">分类:</label>
        <div class="layui-input-inline" style="width: 200px;">
            <select id="isLockout" name="isLockout">
                <option value="">是否锁定</option>
                <option value="1">是</option>
                <option value="0">否</option>
            </select>
        </div>
        <label class="layui-form-mid">排序:</label>
        <div class="layui-input-inline" style="width: 200px;">
            <select name="time">
                <option value="">请选择</option>
                <option value="createTime">创建时间</option>
                <option value="lastLoginTime">最后登录时间</option>
            </select>
        </div>

        <div class="layui-input-inline" style="width: 300px;">
            <button class="layui-btn" lay-submit="" lay-filter="search" id="search" data-type="reload"><i class="layui-icon">&#xe615;</i>搜索</button>
            <button class="layui-btn layui-btn-normal" type="reset" ><i class="layui-icon">&#xe666;</i>重置</button>
        </div>
    </form>
</div>

<!--树形的弹层页面  -->
<div id="diaSetRight" style="display: none; margin-top: 20px;">
    <form class="layui-form" lay-filter="editRoleForm" id="editRoleForm"
          action="">
        <div id="test1" class="demo-transfer"></div>
        <div class="layui-btn-container" style="text-align: center;">
            <button class="layui-btn" lay-filter="addRightSubmit" lay-submit=""><i class="layui-icon">&#xe605;</i>保存</button>
        </div>
    </form>
</div>

<!--穿梭框的弹层页面  -->
<div id="editRoleLayer" style="display: none; margin-top: 20px;">
    <div id="testTransfer" class="demo-transfer"></div>
</div>

<!-- 修改的弹层页面  -->
<div id="editLayer" style="display: none; margin-top: 20px;">
    <form class="layui-form" lay-filter="editForm" id="editForm"
          action="">
        <div class="layui-form-item">
            <label class="layui-form-label">登录名:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text" name="loginName" class="layui-input" lay-verify="required" disabled="disabled">
                <input type="text" hidden="hidden" name="id">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text"  name="protectEMail" class="layui-input"lay-verify="required|email">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号码:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text"  name="protectMTel" class="layui-input"lay-verify="required|phone">
            </div>
        </div>
        <div class="layui-btn-container" style="text-align: center;">
            <button class="layui-btn" lay-filter="editSubmit" lay-submit="">修改提交</button>
        </div>
    </form>
</div>
<!--树形的弹层页面  -->
<div id="treeLayer" style="display: none; margin-top: 20px;">
    <div id="demoTree" class="demo-tree-more"></div>
    <div class="layui-btn-container" style="text-align: center;">
        <button class="layui-btn" id="submitTree" ><i class="layui-icon">&#xe605;</i>保存</button>
    </div>
</div>
<!-- 新增的弹层页面  -->
<div id="addLayer" style="display: none; margin-top: 20px;">
    <form class="layui-form" lay-filter="addForm" id="addForm"
          action="">
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>登录名:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text" name="loginName" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>密码:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="password"  name="password" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>邮箱:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text"  name="protectEMail" class="layui-input"lay-verify="required|email">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span style="color: red">*</span>手机号码:</label>
            <div class="layui-input-inline" style="width: 350px;">
                <input type="text"  name="protectMTel" class="layui-input"lay-verify="required|phone">
            </div>
        </div>
        <div class="layui-btn-container" style="text-align: center;">
            <button class="layui-btn" lay-filter="addSubmit" lay-submit="">新增提交</button>
        </div>
    </form>
</div>






<!--定义数据表格table  -->
<table class="layui-hide" id="proTable" lay-filter="filterTable"></table>

<!--表格数据里的编辑、查看等操作按钮  -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-btn-warm ops" ops="user:setRole" lay-event="editRole" ><i class="layui-icon">&#xe691;</i>角色</a>
    <a class="layui-btn layui-btn-xs layui-btn-primary ops"ops="user:edit" lay-event="edit"><i class="layui-icon">&#xe642;</i>编辑</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger ops"ops="user:del" lay-event="del"><i class="layui-icon">&#xe640;</i>删除</a>
    <a class="layui-btn layui-btn-xs layui-btn-normal ops" ops="user:setRole" lay-event="editTree"><i class="layui-icon">&#xe716;</i>设置权限</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger ops"ops="user:edit" lay-event="editpassword"><i class="layui-icon">&#xe609;</i>密码重置</a>
</script>

<!--表格工具栏的新增、批量等按钮  -->
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm layui-btn-normal ops"ops="user:add" lay-event="add"><i class="layui-icon">&#xe654;</i>添加</button>
    </div>
</script>

<!-- 开关1（既能开也能关） -->
<!-- 开关1（既能开也能关） -->
<script type="text/html" id="switchBar1">
    <input type="checkbox" data-id="{{d.id}}" name="isLockout" lay-filter="isLockout" lay-skin="switch" lay-text="是|否" {{d.isLockout=="1" ? "checked":""}}>
</script>




<script>
    layui.use(['laydate','layer','form','table','tree','upload','transfer'], function() {
        var laydate = layui.laydate	//日期组件
            ,layer = layui.layer	//弹层组件
            ,form = layui.form		//表单组件
            ,upload = layui.upload  //上传组件
            ,tree = layui.tree		//树形结构组件
            ,$= layui.jquery    	//jQuery
            ,table = layui.table	//表格组件
            ,transfer = layui.transfer; //穿梭框组件

        //日期控件
        laydate.render({
            elem: '#beginTime'
        });
        laydate.render({
            elem: '#endTime'
        });

        //渲染表格，填充数据
        table.render({
            elem: '#proTable',			//对应上面定义的表格ID
            url: globalData.server+'users',					//提交到后台的地址
            headers:{token:globalData.token},
            method: 'get',				//提交方式 get或者post
            even: true, 				//表格隔行变色
            page: true,					//开启分页
            toolbar: '#toolbarDemo', 	//开启头部工具栏，并为其绑定左侧模板
            title: '用户表', 				//表格名称
            cols: [
                [{
                    field: 'id',	//对应实体类里的属性    （必需有）
                    fixed: 'left',	//固定方式，left左固定，right右固定 （可选）
                    align:'center', //排列方式：left左对齐，center居中，right右对齐（可选）
                    width: 80,		//单元格宽度（可选）
                    title: '编号',	//表头名称			（必需有）
                    sort: true		//开启排序（可选）
                }, {
                    field: 'loginName',
                    title: '登录名',
                    width: 100,		//单元格宽度（可选）
                },{
                    field: 'protectEMail',	//对应实体类里的属性
                    width: 180,		//单元格宽度
                    title: '邮箱'		//表头名称
                }, {
                    field: 'protectMTel',
                    width: 120,
                    title: '手机号',
                }, {
                    field: 'isLockout',
                    title: '是否锁定',
                    width: 100,
                    toolbar:'#switchBar1'
                },{
                    field: 'createTime',
                    width: 160,
                    title: '创建时间',
                },{
                    field: 'lastLoginTime',
                    title: '最后登录时间',
                    width: 160,
                },{
                    fixed: 'right',
                    title: '操作',
                    width: 400,
                    toolbar: '#barDemo'
                }]
            ],

            done: function(res, curr, count){
                var myOps = sessionStorage.getItem("btnPermission");
                $(".ops").each(function(){
                    if(myOps.indexOf($(this).attr('ops'))==-1){
                        $(this).hide();
                    }
                });
            }
        });

        // 处理开关点击时把信息传入到后台进行修改（isLockSwitch写对应开关的lay-filter值即可）
        form.on('switch(isLockout)', function (data) {
            var id = $(this).attr('data-id');			//获得当前点击对象的id值
            var valid = this.checked ? 'on' : 'off';	//获取到点击后的开关状态（on/off）
            var x=data.elem.checked;					//获取到点击后的开关状态（true/false）
            layer.open({
                content: '确定要修改状态吗？'				//给用户的友好提示
                ,btn: ['确定', '取消']
                ,yes: function(index, layero){
                    data.elem.checked=x;
                    layer.close(index);
                    $.ajax({
                        type : "POST",
                        url : globalData.server+"users/switchIsLockout",
                        headers:{token:globalData.token},
                        data : {"id" : id , "valid" : valid},
                        success : function(res) {
                            if(res){
                                layer.msg(res.msg);
                                table.reload('proTable'); 	//刷新表格
                            }else{
                                layer.msg(res.msg);
                                table.reload('proTable'); 	//刷新表格
                            }
                            form.render();
                        },
                        error : function() {
                        }
                    });
                }
                ,btn2: function(index, layero){
                    //按钮【按钮二】的回调
                    data.elem.checked=!x;
                    form.render();
                    layer.close(index);
                    //return false 开启该代码可禁止点击该按钮关闭
                }
                ,cancel: function(){
                    //右上角关闭回调
                    data.elem.checked=!x;
                    form.render();
                    //return false 开启该代码可禁止点击该按钮关闭
                }
            });
            form.render();
            return false;
        });

        /*
            条件查询	submit 对应 lay-submit  search 对应 lay-filter
        */
        form.on('submit(search)', function (data) {
            var field = data.field;		//获取所有的输入条件值
            //执行重载
            table.reload('proTable', {
                page: { curr: 1 }, 		// 重载后回到第一页
                where: field			// 把所有的输入值传给后台
            });
        });

        //表格头部工具栏事件
        table.on('toolbar(filterTable)', function(obj){
            switch(obj.event){
                //新增按钮
                case 'add':
                    //清空新增页面的表单内容，防止上次输入的数据还在
                    $("#addForm")[0].reset();
                    //打开新增的弹层
                    layer.open({
                        type:1,
                        title: '您正在新增用户信息',
                        content: $('#addLayer'),
                        area: ['700px','500px']
                    });
                    break;

                //批量删除按钮
                case 'delAll':
                    //获取选中的数据
                    var checkStatus = table.checkStatus('proTable');
                    var ids = [];
                    for(var i=0; i<checkStatus.data.length; i++){
                        ids.push(checkStatus.data[i].id)
                    }
                    if(ids.length == 0){
                        alert("请选择需要删除的产品");
                        return;
                    }
                    //拼接id(把数组转成字符串，并且用逗号拼接),比如ids=[2,5,6]，那么id='2,5,6'
                    var id = ids.join(',');
                    if(confirm("确定全部删除吗？")){
                        $.ajax({
                            type: 'post', 		//提交方式get或post
                            url: '', 			//提交路径
                            data: {'ids':id}, 	//参数
                            dataType: 'json', 	//返回的数据类型
                            success: function(res) { 		//提交成功
                                layer.alert(res.msg);
                                table.reload('proTable');
                            },
                            error: function() { 			//提交失败
                                alert("系统异常！！")
                            }
                        });
                    }

                    break;
            };
        });

        //数据表格里的事件监听
        table.on('tool(filterTable)',function(obj){
            var data = obj.data;//获取当前行的数据

            switch(obj.event){
                case 'editRole': //穿梭框组件
                    //获取穿梭框左边数据
                    $.ajax({
                        type: 'post',
                        url: globalData.server + "roles/selectAllRoles",
                        headers:{token:globalData.token},
                        dataType: 'json',
                        success: function(res) {
                            var zuo = res;
                            //获取穿梭框右边数据
                            var you =  new Array();
                            $.ajax({
                                type: 'post',
                                url: globalData.server + "userroles/selectUserrolesById",
                                headers:{token:globalData.token},
                                data: {
                                    "uid": data.id
                                },
                                dataType: 'json',
                                success: function(res) {
                                    // if(res.count > 0) {
                                    for(var i = 0; i < res.length; i++) {
                                        you.push(res[i].id);
                                    }
                                    // }

                                    //渲染穿梭框
                                    transfer.render({
                                        elem: '#testTransfer',
                                        title: ['系统所有角色', '当前用户的角色'],
                                        data: zuo,
                                        value: you,
                                        parseData: function(udata) {
                                            return {
                                                "value": udata.id, //数据值
                                                "title": udata.name //数据标题
                                            }
                                        },
                                        onchange: function(obj, index) {
                                            if(index == "0") {
                                                //新增用户角色
                                                for (var i = 0; i < obj.length; i++) {
                                                    $.ajax({
                                                        type: "post",
                                                        url: globalData.server + "userroles/AddUserroles",
                                                        data: {
                                                            "userId": data.id,
                                                            "roleId": obj[i].value
                                                        },
                                                        headers:{token:globalData.token},
                                                        dataType: 'json',
                                                        success: function(res) { //提交成功

                                                        },
                                                        error: function() { //提交失败
                                                            alert("系统异常！！")
                                                        }
                                                    });
                                                }

                                            } else {
                                                //删除用户角色
                                                for(var i = 0; i < obj.length; i++) {
                                                    $.ajax({
                                                        type: "post",
                                                        url: "" + globalData.server + "userroles/deleteUserroles",
                                                        data: {
                                                            "userId": data.id,
                                                            "roleId": obj[i].value
                                                        },
                                                        headers:{token:globalData.token},
                                                        dataType: 'json',
                                                        success: function(res) { //提交成功
                                                            if(res.code==0){

                                                            }else {
                                                                layer.alert(res.msg);
                                                                table.reload('proTable');
                                                            }
                                                        },
                                                        error: function() { //提交失败
                                                            alert("系统异常！！")
                                                        }
                                                    });
                                                }

                                            }
                                        }
                                    });
                                },
                                error: function() {
                                    alert("获取失败！！！")
                                }
                            });
                        },
                        error: function() {
                            alert("获取失败！！！")
                        }
                    });

                    //打开穿梭框弹层
                    layer.open({
                        type: 1,
                        title: '您正在设置用户[' + data.loginName + ']的角色',
                        content: $("#editRoleLayer"),
                        area: ['500px', '400px'],
                        fixed: false, //不固定
                        maxmin: true,
                        offset: '10px'
                    });
                    break;
                case 'editTree':		//树形组件操作
                    cur_roleId = data.id; //给全局变量的当前角色ID赋值
                    console.log(data.id)
                    //获取数据
                    $.ajax({
                        type: 'post',
                        url: globalData.server+'userModule/getDendrogram',
                        headers:{token:globalData.token},
                        data: {userId:data.id},
                        dataType: 'json',
                        success: function(res) {
                            tree.render({
                                elem: '#demoTree',
                                data: res,
                                id: 'roleTreeId',
                                showCheckbox: true
                            })
                        },
                        error: function() { //提交失败
                            alert("系统异常！！")
                        }
                    });

                    //打开弹层
                    layer.open({
                        type:1,
                        title: '您正在给编号【'+ data.id + '】设置权限',
                        content: $('#treeLayer'),
                        area: ['400px','500px']
                    });

                    break;
                case 'edit':		//修改操作

                    //数据的回显
                    form.val("editForm", data);
                    //打开弹层
                    layer.open({
                        type:1,
                        title: '您正在修改编号【'+ data.id + '】的信息',
                        content: $('#editLayer'),
                        area: ['700px','500px']
                    });

                    break;
                case 'detail':		//查看操作
                    //数据的回显
                    form.val("detailForm", data);
                    //打开弹层
                    layer.open({
                        type:1,
                        title: '您正在查看编号【'+ data.id + '】的信息',
                        content: $('#detailLayer'),
                        area: ['700px','500px']
                    });
                    break;
                case 'del':		//删除操作
                    if(confirm("确定删除吗？")){
                        $.ajax({
                            type: 'delete', 					//提交方式get或post
                            url: globalData.server+'users/'+data.id,				//提交路径
                            dataType: 'json', 				//返回的数据类型
                            headers:{token:globalData.token},
                            success: function(res) { 		//提交成功
                                layer.alert(res.msg);		//提示信息
                                table.reload('proTable'); 	// 修改后要刷新表格
                            },
                            error: function() { //提交失败
                                alert("系统异常！！")
                            }
                        });
                    }



                    break;
                case 'editpassword':		//图片管理操作
                    if(confirm("确定重置密码吗？")){
                        $.ajax({
                            type: 'post', 					//提交方式get或post
                            url: globalData.server+'users/updatePasswordById',				//提交路径
                            headers:{token:globalData.token},
                            data: {"id":data.id}, 			//参数
                            dataType: 'json', 				//返回的数据类型
                            success: function(res) { 		//提交成功
                                layer.alert(res.msg);		//提示信息
                                table.reload('proTable'); 	// 修改后要刷新表格
                            },
                            error: function() { //提交失败
                                alert("系统异常！！")
                            }
                        });
                    }

                    break;
            };
        })

        //修改弹层的提交按钮
        form.on('submit(editSubmit)', function(data) {
            $.ajax({
                type: 'post', 					//提交方式get或post
                url: globalData.server+'users/updateById', 						//提交路径
                data: $("#editForm").serialize(),
                headers:{token:globalData.token},
                dataType: 'json', 					//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.alert(res.msg);		//提示信息
                    table.reload('proTable'); 	//刷新表格
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });
            return false;
        });

        //新增弹层的提交按钮
        form.on('submit(addSubmit)', function(data) {
            $.ajax({
                type: 'post', 					//提交方式get或post
                url: globalData.server+'users/insertUsers',	 					//提交路径
                data: $("#addForm").serialize(),
                headers:{token:globalData.token},
                dataType: 'json', 				//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.alert(res.msg);		//提示信息
                    table.reload('proTable'); 	// 修改后要刷新表格
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });

            return false;
        });

        //给角色设置权限，提交操作
        $("#submitTree").click(function() {
            var nodes = tree.getChecked('roleTreeId');
            treeSelectedArr = []; //清空已选中的权限数组
            for(var i = 0; i < nodes.length; i++) {
                getChildenId(nodes[i]); //调用递归的方法来获取所有选中节点的Id
            }
            //调用远程接口保存设置
            $.ajax({
                type: 'post',
                url: globalData.server+'userModule/savePermission',
                headers:{token:globalData.token},
                data: {roleId:cur_roleId,selectedModule:treeSelectedArr.join(",")},
                dataType: 'json',
                success: function(res) { 		//提交成功
                    if(res) {
                        layer.msg('保存权限成功！', {
                            icon: 1,
                            time: 1000
                        }, function() {
                            layer.closeAll(); //关闭修改弹出层
                        });
                    } else {
                        layer.msg('保存权限失败！', {
                            icon: 2,
                            time: 1000
                        })
                    }
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });

        });

        //主图片上传
        var uploadInst1 = upload.render({
            elem: '#maintu'
            ,url: 'uploadImg.do'
            ,accept:'images'
            ,size:50000
            ,before: function(obj){
                //预读本地文件
                obj.preview(function(index, file, result){
                    $('#demo1').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }

                //上传成功
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                //图片url填写
                var fileupload = $("#mainImgUrl");
                fileupload.attr("value",res.data);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText1');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst1.upload();
                });
            }
        });
        //副图片上传
        var uploadInst2 = upload.render({
            elem: '#futu'
            ,url: 'uploadImg.do'
            ,accept:'images'
            ,size:50000
            ,before: function(obj){
                //预读本地文件
                obj.preview(function(index, file, result){
                    $('#demo2').attr('src', result);
                });
            }
            ,done: function(res){
                //如果上传失败
                if(res.code > 0){
                    return layer.msg('上传失败');
                }

                //上传成功
                var demoText = $('#demoText2');
                demoText.html('<span style="color: #4cae4c;">上传成功</span>');
                //图片url填写
                var fileupload = $("#futuImgUrl");
                fileupload.attr("value",res.data);
            }
            ,error: function(){
                //演示失败状态，并实现重传
                var demoText = $('#demoText2');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function(){
                    uploadInst2.upload();
                });
            }
        });

        //图片上传的提交按钮
        form.on('submit(imgSubmit)', function(data) {
            console.log($("#imgForm").serialize());
            $.ajax({
                type: 'post', 					//提交方式get或post
                url: '', 						//提交路径
                data: $("#imgForm").serialize(), 	//参数
                dataType: 'json', 					//返回的数据类型
                success: function(res) { 		//提交成功
                    layer.closeAll();			//关闭弹层
                    layer.alert(res.msg);		//提示信息
                    table.reload('proTable'); 	//刷新表格
                },
                error: function() { //提交失败
                    alert("系统异常！！")
                }
            });
            return false;
        });


    });
    //递归获取选中节点的Id
    function getChildenId(node) {
        if(node != null) {
            treeSelectedArr.push(node.id);
            for(var i = 0; node.children != null && i < node.children.length; i++) {
                getChildenId(node.children[i]);
            }
        }
    }

</script>
</body>
</html>
